Jede SVG-Datei beginnt, wie es bei XML-basierten Sprachen üblich ist, mit der XML-Deklaration und der Dokumenttypdeklaration, die den benutzten Namensraum beschreibt. Dazu wird bei letzterem ein Verweis auf die entsprechende DTD-Datei eingefügt. Danach kann schon das Starttag <svg> kommen. Die SVG-Datei wird durch das abschließende Endtag </svg> abgeschlossen.

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>	 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="300">	 

  <!-- Inhalt der SVG-Datei -->

</svg>	 

Beim SVG-Starttag (<svg>) wird auch gleich die Breite und Höhe des Ausgabebildschirms definiert.

Alle graphischen Objekte in SVG bauen auf einfachen graphischen Grundelement auf. Komplexere Objekte sind dabei aus mehreren einfachen Objekten zusammengesetzt.

Der Pfad ist das eigentliche Grundelement in SVG. Aus ihm können alle anderen Objekte (Kreise, Rechtecke, Polygone etc.) aufgebaut werden. Da das aber teilweise sehr umständlich ist, hat man diese häufigen Formen extra mit eigenen Beschreibungen versehen, die in dem Anschluss aufgeführt werden.

Der Pfad wird in dem Attribut (d) entweder durch Koordinatenpaare (absolut) oder durch Vektoren (relativ) beschrieben. Großbuchstaben werden von Koordinaten gefolgt, Kleinbuchstaben von Vektoren. Diese Koordinaten und Vektoren geben die Anweisung wie der Pfad gezeichnet werden soll.

• M/m - moveto = Stift dorthin bewegen
• L/l - lineto = mit Stift dorthin zeichnen
• Q/q - quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Absichtpunkt)
• C/c - kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Absichtpunkt)Beispiel:

Der absolut beschriebene Pfad...

<path d="M 10 10 L 20 20 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />

ist identisch mit dem relativen

<path d="M 10 10 l 10 10 -2  2 c  6  6 -4  3 -8 18 q 10  5  5.33 20" />

Für horizontale und vertikale Linien existiert eine entsprechend vereinfachte Notation, für Ellipsen und Kreise ist eine spezielle Notation mit sieben Werten erforderlich.

• H/h - horizontal line = horizontale Linie zeichnen (X-Wert)
• V/v - vertical line = vertikale Linie zeichnen (Y-Wert)
• A - elliptical arc = Bogenkurve

Der Kreis wird mindestens durch den Radius (r) definiert. Optional kann die Position des Mittelpunktes durch die Atribute cx und cy festgelegt werden. Füllung , Art der Umrisslinie oder Transparenz werden durch das Attribut style definiert.

<circle cx="100" cy="100" r="50" />   

Die Ellipse wird durch die zwei Halbachsenradien definiert (rx und ry). Alle anderen Attribute sind die gleichen wie beim Kreis.

<ellipse cx="100" cy="100" rx="50" ry="20" />

Ein Rechteck kann auf ca. eine konforme Art definiert werden. Diese Möglichkeit ist die Beschreibung durch die obere linke Ecke mit den Koordinaten (x und y) und die Breite (width) und Höhe (height).

<rect x="100" y="100" width="100" height="200" />

Möchte man die Ecken des Rechtecks abrunden, kann man das mit Hilfe der Attribute (rx und ry) bewerkstelligen.

Eine einfache gerade Linie wird durch die beiden Endpunkte in SVG beschrieben.

<line x1="100" y1="100" x2="200" y2="200" />

Um eine Linie über mehrere Stützpunkte zu definieren, benutzt man die Beschreibung als Polylinie . Dabei werden die einzelnen Koordinatenpaare der Stützpunkte einfach fortlaufend hintereinander geschrieben. Die Linie wird von ersten Punkt aus zu dem zweiten gezogen und von dort weiter zu dem dritten Stützpunkt und so weiter.

<polyline points="100 100 200 200 300 40" />

Ein Polygon (Vieleck) wird durch seine Eckpunkte beschrieben. Wie bei der Polyline werden auch hier alle Koordinatenpaare einfach hintereinander geschrieben.

<polygone points="100 100 100 200 150 200" />

Zeichen, Text können mit Hilfe des Elements <text> definiert werden.

<text x="100" y="100" style="font-size:40">Hallo Welt!</text>

• Adobe SVG Viewer (www.adobe.com/svg)
• Corel SVG Viewer (www.smartgraphics.com/Viewer_download.shtml)
• Batik (xml.apache.org/batik)
• KSVG als Plugin für den Konqueror oder andere KDE-Applikationen== SVG-Editoren ==

• Sodipodi (Webseite (http://www.sodipodi.com/)), Unix und Windows, unterstützt noch keine Animationen (englisch)
• Inkscape (Webseite (http://www.inkscape.org/)), ein Fork von Sodipodi, mit dem Absicht, eine bessere Benutzeroberfläche zu entwickeln.

• Jasc WebDraw (www.jasc.com (http://www.jasc.com/products/webdraw/)), es wird auch eine 30 Tage Testversion angeboten.
• SVG Composer (www.svgcomposer.com )
• sphinx SVG (www.in-gmbh.de (http://www.in-gmbh.de/de/Produkte/Visualisierung/sphinxSVG.html))
• Corel Smart Graphics Studio (www.smartgraphics.com)
• EvolGrafiX (www.pcxsoftware.de)

• Corel Draw ab Version 10
• Adobe Illustrator 9/10
• OpenOffice.org
• CATIA ab Version 5
• The GIMP ab Version 2

Das Vektorprogramm Freehand unterstützt SVG nicht, vermutlich weil es von der Firma Macromedia kommt, das Flash (ein Macromedia-Produkt) vorzieht.

SVG Open (http://www.svgopen.org/) organisierte schon dreimal eine internationale Konferenz, die sich mit allem rund um das Thema SVG beschäftigte.

• Zürich, Schweiz, 15.-17. Juli 2002
• Vancouver, Kanada, 13.-18. Juli 2003
• Tokio, Japan, 7.-10. September 2004